<template >
  <div class="nav">
    <div class="My-header">
      <button class="My-header-user">
        <img
          class="My-header-user-item"
          src="../components/img/默认头像.png"
          alt=""
        />
        <router-link rel="stylesheet" to="/home/mylogin" href="">
          <div class="My-header-user-text">
            <h2>立即登录</h2>
            登录后可收藏喜欢的菜谱
          </div>
        </router-link>
        <img class="My-arrow" src="../components/img/02.png" alt="" />
      </button>

      <button class="My-vip">
        <img src="../components/img/01.jpg" alt="" />
      </button>
    </div>
    <div class="My-matter">
      <button>
        <img class="My-arrow" src="../components/img/02.png" alt="" />
        我的收藏
      </button>
      <button>
        浏览记录 <img class="My-arrow" src="../components/img/02.png" alt="" />
      </button>
    </div>
    <div class="My-btm">
      <button>
        签到领现金
        <img class="My-arrow" src="../components/img/02.png" alt="" />
      </button>
      <button>
        去App Store给烘焙小屋评分
        <img class="My-arrow" src="../components/img/02.png" alt="" />
      </button>
      <button>
        反馈问题 <img class="My-arrow" src="../components/img/02.png" alt="" />
      </button>
    </div>
    <span class="My-nav-ipv">v3.9.3</span>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss"  scoped>
a {
  text-decoration: none;
}
.nav .My-nav-ipv {
  display: block;
  text-align: center;
}
.My-header-user-item img {
  border: 0px;
}
* {
  padding: 0;
  margin: 0;
}
.My-header-user {
  height: 100px;
}
button {
  width: 100%;
  border: 0;
  background-color: white;
}
img {
  width: 100%;
  border: 0;
}
.My-matter {
  margin-top: 7px;
}
.My-matter button {
  height: 50px;
  font-size: 18px;
  text-align: left;
}
.My-btm {
  margin-top: 7px;
  background-color: white;
}
.My-btm button {
  text-align: left;
  height: 50px;
  font-size: 18px;
}

.My-header-user-text {
  position: relative;
  right: -20px;
  top: 25px;
  color: black;
}
.My-header-user-item {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 60px;
  display: flex;
  margin-top: 20px;
}
.My-arrow {
  width: 25px;
  height: 25px;
  float: right;
}
</style> 
